import React, { useState, useEffect } from 'react';
import Head from 'next/head'
import { Row, Col, Avatar, Button, Input, Upload } from 'antd'
import ImgCrop from 'antd-img-crop';
import { FastBackwardOutlined, FastForwardOutlined, PlayCircleOutlined, AudioOutlined, SwapOutlined } from '@ant-design/icons'
import Author from '../components/Author'
import Footer from '../components/Footer'
import Music from '../components/Music'
import '../public/style/pages/message.css'
import Header from '../components/Header'
import axios from 'axios'
import servicePath from '../config/apiUrl';
import Link from 'next/link'

const Message = () => {
    const { TextArea } = Input;
    const [ fileList, setFileList ] = useState([]);
    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };
    const onPreview = async file => {
        let src = file.url;
        console.log(src)
        if (!src) {
          src = await new Promise(resolve => {
            const reader = new FileReader();
            reader.readAsDataURL(file.originFileObj);
            reader.onload = () => resolve(reader.result);
          });
        }
        const image = new Image();
        image.src = src;
       
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };
    return (
        <div className="container">
        <Head>
            <title>留言板</title>
            <meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />
            <link rel="icon" type="image/png/jpg" href="image/avatar.jpg" sizes="96*96"></link>
        </Head>
        <Header />
        
        <Row className="comm-main" type="flex" justify="center">
            <Col className="comm-left" xs={24} sm={24} md={16} lg={14} xl={12}>

                <div className="message">HeYang的留言板</div>
                <div className="user-message">
                    <Input size="large" placeholder="请输入你的笔名" className="username" />
                    <Input size="large" placeholder="请输入你的邮箱" className="email" />
                    <TextArea rows={6} placeholder="朋友，留下点什么再走吧" className="comment" />
                    <ImgCrop rotate>
                        <Upload
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            listType="picture-card"
                            fileList={fileList}
                            onChange={onChange}
                            onPreview={onPreview}
                        >
                            {fileList.length < 5 && '+ 上传头像'}
                        </Upload>
                    </ImgCrop>
                    <Button size="large" type="primary" className="submit">留言</Button>
                </div>

            </Col>
            <Col className="comm-right" xs={0} sm={0} md={8} lg={4} xl={4}>
            <Author />
            
            </Col>
        </Row>
        
        <Footer />
        </div>
    )
}

export default Message
